<template>
  <view v-if="shenheStatus == 0" class="card_container">
    <view class="card_top">
      <view class="card_top_price">
        <view class="price_title">{{ $t('person.balance') }}</view>
        <view class="price_value">{{ userInfo.money }}</view>
      </view>
      <view class="card_top_balance">
        <view class="price_title">{{ $t('shop.integral') }}</view>
        <view class="price_value">{{ userInfo.integral }}</view>
      </view>
    </view>
    <view class="card_form">
      <u-form :model="form" ref="uForm">
        <u-form-item :label="$t('shop.account')"
          ><u-input v-model="userInfo.nickname" disabled="true"
        /></u-form-item>
        <u-form-item :label="$t('shop.cardNum')" prop="code"
          ><u-input v-model="form.code" :placeholder="$t('shop.noCardNum')"
        /></u-form-item>
        <u-form-item :label="$t('shop.password')" prop="pwd"
          ><u-input v-model="form.pwd" :placeholder="$t('shop.noPassword')"
        /></u-form-item>
      </u-form>
    </view>
    <view class="card_bottom">
      <view style="text-align: center; color: #666666">{{
        $t('shop.noEdit')
      }}</view>
      <view class="card_btn" @click="submit">{{
        $t('person.immediately')
      }}</view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      userInfo: {},
      form: {
        code: '',
        pwd: '',
      },
      rules: {
        code: [
          {
            required: true,
            message: this.$t('shop.noNum'),
            trigger: 'change',
          },
        ],
        pwd: [
          {
            required: true,
            message: this.$t('shop.noPassword'),
            trigger: 'change',
          },
        ],
      },
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t('title.valueCard'),
    });
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo');
  },
  methods: {
    async submitForm() {
      try {
        const res = await this.$allrequest.coupon.vscardSubmit({
          ...this.form,
        });
        if (res.code == 0) {
          if (res.type == 1) {
            this.userInfo.money = res.num;
          } else if (res.type == 2) {
            this.userInfo.integral = res.num;
          }
          uni.setStorageSync('userInfo', this.userInfo);
        }
        this.$utils.toast(res.msg);
      } catch (e) {
        //TODO handle the exception
      }
    },
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.submitForm();
        } else {
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.card_container {
  height: 100vh;
  background-color: rgb(246, 246, 246);
}
.card_top {
  height: 200rpx;
  background-color: rgb(251, 32, 32);
  padding: 40rpx;
  display: flex;
  color: #fff;
}
.card_top_price {
  width: 50%;
}
.card_top_value {
  width: 50%;
}
.price_title {
  font-size: 30rpx;
}
.price_value {
  font-size: 50rpx;
  font-weight: bold;
  line-height: 80rpx;
}
.card_form {
  background-color: #fff;
  padding: 30rpx;
}
.card_bottom {
  padding: 40rpx 0;
}
.card_btn {
  width: 80%;
  background-color: rgb(251, 32, 32);
  border-radius: 50rpx;
  height: 100rpx;
  line-height: 100rpx;
  margin: 30rpx auto;
  color: #fff;
  text-align: center;
}
</style>
